<template>
  <div :class="!iserror? 'app-content' :''" id="app">
    <div v-if="!iserror">
      <nav-bar :title="'游戏'" />
      <div>
        <div class="charge-title">游戏分类：<img src="../../assets/star.png" width="5px" height="5px"></div>
        <cube-select class="pay-input w-65_" v-model="appealData.game" :options="propGame">
        </cube-select>
        <div>
          <p class="errorMessage" v-show='errorMessage.game'>请选择游戏分类</p>
        </div>
        <div class="charge-title">问题分类：<img src="../../assets/star.png" width="5px" height="5px"></div>
        <cube-select class="pay-input w-65_" v-model="appealData.question_type" :options="propGameProblem">
        </cube-select>
        <div>
          <p class="errorMessage" v-show='errorMessage.question_type'>请选择问题分类</p>
        </div>
        <div class="charge-title">详细描述：<img src="../../assets/star.png" width="5px" height="5px"> </div>
        <cube-textarea v-model="appealData.desc"
          placeholder="提供游戏场次、您的牌型、下注对象、下注金额等。信息越全面，处理速度越快哦～" class="pay-textarea"
          :maxlength="1000"></cube-textarea>

        <div>
          <p style="margin: 5px 5% 0px; color: red; font-size: 12px;" v-show='errorMessage.desc'>请填写详细描述</p>
        </div>
        <div>
          <p class="errorMessage" v-show='exa.desc'>详细描述不得少于10字</p>
        </div>
        <div>
          <div class="charge-title">问题出现具体时间：<img src="../../assets/star.png" width="5px" height="5px"></div>
          <div class="charge-order pay-time w_65_" ref="getPayat">
            <div class="content edit-input" @click='showDateTimePicker'>
              {{pay_at}}
            </div>
            <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
          </div>

          <div>
            <p style="margin: 5px 5% 0px; color: red; font-size: 12px;" v-show=' errorMessage.appear_at'>请选择问题出现具体时间</p>
          </div>
        </div>
        <div class="charge-title">上传图片： </div>
        <!-- 图片上传 -->
        <div class="upload-box">
          <cube-upload class="cube-upload" v-model="uploadfiles" :max="3" :action="upAction" :auto="false"
            :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted"
            @file-success="filesSuccess" @file-error="fileError" />
          <div class="upload">
          </div>
        </div>
        <div class="submit">
          <div>请确保以上信息填写无误，处理速度更快哦，<br><br>
            结果请在<span class="color-Gold">客服</span>-><span class="color-Gold">反馈记录</span>中查看哟</div>
          <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
        </div>
      </div>

      <div v-show='showLoading' class="showLoading">
        <cube-loading class="loading-div" :size="40"></cube-loading>
        <div class="loadingtext">{{loadingMsg}}</div>
      </div>
    </div>
    <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
  </div>
</template>

<script>
  const dateFormat = require('dateformat')
  import { Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem } from 'vant'
  import NavBar from '@/components/customerService/NavBar.vue'
  import error from '@/pages/error/App.vue'
  import { submitWorkOrder } from '@/api/customerService'
  import { dataNullFilter, dataDescLengthFilter,ckDesc } from '@/utils/ckData'
  import mixins from '@/model/mixins'

  export default {
    mixins: [mixins],
    components: {
      NavBar,
      'error-page': error,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [DatetimePicker.name]: DatetimePicker,
      [Field.name]: Field,
      [Uploader.name]: Uploader,
      [Popup.name]: Popup,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem
    },
    watch: {
      'appealData.desc':function () {
        let desc=ckDesc(this.appealData.desc);
        this.appealData=Object.assign(this.appealData,{desc})
        this.$forceUpdate()
      }
    },
    data () {
      return {
        loadingMsg: '',
        iserror: false,
        propGame: this.$store.state.app.propGame,
        propGameProblem: this.$store.state.app.propGameProblem,
        appealData: {},
        uploadfiles: [],
        upAction: {
          target: 'http://up-z2.qiniup.com',
          data: new FormData()
        },
        pay_at: '',
        filename: [],
        showLoading: false,
        iserrordata: false,
        errorMessage: {
          game: false,
          question_type: false,
          desc: false,
          appear_at: false,
        },
        iserrorDescLength: false,
        exa: {
          desc: false,
        },
        filenameNew: []
      }
    },
    created () {
    },
    mounted () {
    },
    methods: {
      submitWorkOrder () {
        this.loadingMsg = "正在提交中..."
        this.appealData.images = this.filenameNew
        this.errorMessage = dataNullFilter(this.appealData, this.errorMessage, this);
        this.exa = dataDescLengthFilter(this.appealData, this.exa, this.errorMessage, this);
        this.$forceUpdate()
        if (this.iserrordata) {
          return;
        }
        else if (this.iserrorDescLength) {
          return;
        } else {
          this.showLoading = true
          Object.assign(this.appealData, { type_id: 4 })
          submitWorkOrder(this.appealData).then(res => {
            if (res.status === 0) {
              const QuerySerch = location.search
              location.href = `/success_cs${QuerySerch}`
            }
          }).catch(error => {
            this.showLoading = false
            if (error.response.data.status == -400) {
              this.iserror = true
            }
          })
        }
      },

      selectHandle (date, selectedVal) {
        Object.assign(this.appealData, { appear_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss') })
        this.pay_at = dateFormat(date, 'yyyy-mm-dd HH:MM:ss')
      },


    },
    beforeDestroy () {
    },
  }
</script>
